<template>
    <div>
        <!-- 3.0 使用组件 -->
        <edit-recommend></edit-recommend>
        <new-song @newsong-tap="addMusic" :num="index"></new-song>
        <!-- 动画控制音乐播放器 -->
        <div>
            <transition 
            leave-active-class="animate__animated animate__fadeOutLeftBig"
            enter-active-class="animate__animated animate__backInLeft">
                <!-- 音乐播放器组件 -->
                <player-comp 
                    v-if="isShow" 
                    :rid="id" 
                    :rsongList="songList"
                    @play-end="reciveIndex"></player-comp>
            </transition>
        </div>
    </div>
</template>
<script>
// 编辑推荐组件
// 1.0 导入组件（定义组件）
import EditRecommend from '@/components/edit-recommend.vue';
import NewSong from '@/components/new-song.vue';
import PlayerComp from '@/components/player-comp.vue';

export default {
    name: 'recmusic',
    // 2.0 注册组件
    components: {
        EditRecommend,
        NewSong,
        PlayerComp
    },
    data() {
        return {
            isShow: false,
            music: null,
            id: '',
            songList:[],
            index: 0
        }
    },
    methods: {
        // 接收player-comp组件的参数
        reciveIndex(params){
            console.log('5.0',params);
            this.index = params.index;
        },
        // 接收new-song组件的参数
        addMusic(params){
            // console.log("2.0",params);
            // 判断params是否带有music这个数据
            if(params.music){
                this.music = params.music;
                this.id = params.music.id;
                this.songList = params.songList;
                // console.log( '3.0',this.songList )
            }
            else {
                this.id = "";
            }
            // 显示播放器控件
            this.isShow = params.isShow;
        }
    },
    // 离开该组件  重置数据
    beforeRouteLeave(to,from,next){
        this.isShow = false;
        this.index = -1;
        next();
    }
}
</script>
<style scoped>
@import url(../../../static/style/animate.min.css);
div {
    background-color: #FCFCFD;
}
</style>